<template>
  <div class="home-wrapper">
    <transition>
      <router-view/>
    </transition>
    <mt-tabbar v-model="$store.state.navlist.nav.selected">
      <mt-tab-item :id="$store.state.navlist.nav.navlist.map.id">
        <img slot="icon" src="../assets/images/map.png">
        <router-link to="/home/map" tag="span">{{$store.state.navlist.nav.navlist.map.title}}</router-link>
      </mt-tab-item>
      <mt-tab-item :id="$store.state.navlist.nav.navlist.list.id">
        <img slot="icon" src="../assets/images/list.png">
        <router-link to="/home/list" tag="span">{{$store.state.navlist.nav.navlist.list.title}}</router-link>
      </mt-tab-item>
      <mt-tab-item :id="$store.state.navlist.nav.navlist.my.id">
        <img slot="icon" src="../assets/images/my.png">
        <router-link to="/home/my" tag="span">{{$store.state.navlist.nav.navlist.my.title}}</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {};
</script>

<style>
.mint-tab-item-label span {
  display: block;
}
</style>
